<template>
    <div class="song-audio">
        <audio ref="audio" id="player" 
            :src="songUrl"
            controls = "controls"
            preload="true"
            @canplay="startPlay"
            @ended="ended"
        >
        </audio>
    </div>
</template>


<script>
    import {mapGetters} from 'vuex'
    export default {
        name: 'song-audio',
        methods: {
            // 获取链接后准备播放
            startPlay () {
                this.$refs.audio.play()

            },
            // 播放完成后出发
            ended () {
                this.$store.commit("setIsPlay",false)
            },
            // 开始,暂停
            togglePlay () {
                let player = this.$refs.audio
                if(this.isPlay) {
                    player.play()
                }else {
                    player.pause()
                }
            }
        },
        watch: {
            // 监听状态,如果状态值改变,调用方法控制音乐播放
            isPlay () {
                this.togglePlay()
            }
        },
        computed: {
            ...mapGetters(["isPlay","songUrl","id"])
        },

    }
</script>


<style scoped lang="less">
    .song-audio{
        display: none;
    }
</style>